<template>
  <!-- 饼图 -->
  <div :id="chartId" class="chart"></div>
</template>

<script>
import {hexToRgba, resize, spaceTxt, downloadChartImg} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      graphType: 'pie',
      colors: ['#79e2ff', '#A5F7B9']
    }
  },
  methods: {
    init() {
      let seriesData = this.getSeriesData()
      // 图例
      let legend = {
        type: 'plain',
        show: true,
        left: '2%',
        right: '3%',
        bottom: '3%',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        },
      }
      // 提示框
      let tooltip = {
        confine: true,
        show: true,
        // trigger: 'item',
        backgroundColor: "#fff",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        borderRadius: 0,
        padding: 5,
        textStyle: {
          fontWeight: 'normal',
          color: "#000",
        },
        // formatter: (params) => {
        //   let param = params[0]
        //   let value = param.data.find(v => v !== param.name && v !== '-')
        //   let index = param.data.findIndex(v => v !== param.name && v !== '-')
        //   return `${params[index-1].marker}${param.name}：${value}`
        // }
      }
      let option = {
        // 提示框
        tooltip,
        // 图例
        legend,
        // 背景色
        backgroundColor: '#fff',
        series: seriesData
      }

      this.chart.setOption(option, true)
    },
    getSeriesData() {
      let seriesData = []
      let data = []
      this.chartData.forEach(v => {
        data.push({
          name: v.keyAsString,
          value: v.docCount
        })
      })
      let obj = {
        type: this.graphType,
        radius: ['36%', '60%'],
        center: ['50%', '50%'],
        roseType: false,
        label: {
          show: true,
          formatter: (param) => {
            let data = param.data
            let str = `${data.name}(${data.value})`
            return str
          }
        },
        labelLine: {
          show: true
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff',
          borderType: 'solid',
          borderRadius: 6
        },
        // minShowLabelAngle: 4,
        data
      }
      seriesData.push(obj)
      // for (let i=0; i<this.chartData.length; i++) {
      //   if (this.chartData[i][0] !== 'product') {
      //     let obj = {
      //       type: this.graphType,
      //       id: this.chartData[i][0],
      //       name: this.chartData[i][0],
      //       seriesLayoutBy: 'row',
      //       symbol: 'circle',
      //       symbolSize: '8',
      //       connectNulls: true,
      //       smooth: true,
      //       scale: true,
      //       barMaxWidth: 24,
      //       barGap: '-100%',
      //       connectNulls: false,
      //       // label: {
      //       //   normal: {
      //       //     show: true,
      //       //     position: 'top',
      //       //     color: '#6b6c7e',
      //       //     fontSize: 12,
      //       //     // formatter: (params) => {
      //       //     //   let value = params.data[params.encode.y[0]]
      //       //     //   if (value === 0) { // 如果为0，则不展示label
      //       //     //     value = ''
      //       //     //   }
      //       //     //   return value
      //       //     // }
      //       //   }
      //       // },
      //       universalTransition: true,
      //       animationDurationUpdate: 1000,
      //     }
      //     // if (this.chartConfig.needStack) {
      //     //   obj['stack'] = 'all'
      //     // }
      //     seriesData.push(obj)
      //   }
      // }
      return seriesData
    },
    changeGraphType(type) {
      this.graphType = type
      this.init()
    },
    // 保存图片
    downloadImg() {
      downloadChartImg(this.chart)
    }
  },
  watch: {
    chartData() {
      this.init()
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.init()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>

</style>